<template>

    <el-drawer
        v-model="roleDrawer"
        :title="title"
        size="30%"
        :direction="direction"
        :before-close="handleClose"
    >
        <el-tabs type="border-card">
            <el-tab-pane label="角色菜单">
                <div style="display: flex;justify-content: space-between;">
                    <el-input style="width: 60%" v-model="keyword" placeholder="筛选" maxlength="20"></el-input>
                    <el-button class="kva-button" type="primary" icon="check" @click="handleSubmitMenusToRole" >确定</el-button>
                </div>
                <div class="treeBox">
                    <el-tree
                        ref="treeRef"
                        :data="menuTreeData"
                        default-expand-all
                        check-on-click-node
                        highlight-current
                        show-checkbox
                        node-key="id"
                        :props="defaultProps"
                        :filter-node-method="filterNode"
                    />
                </div>
            </el-tab-pane>
        </el-tabs>
    </el-drawer>

</template>

<script setup>
import {FindData} from "@/api/sysMenu.js"
import {FindRoleMenu,SaveRoleMenu} from "@/api/sysRoleMenu.js"
import {kvaMessage} from "@/utils/kvaMessage.js";

// 定义打开的属性
const roleDrawer = ref(false)
// 定义标题
const title = ref("")
// 定义搜索关键词属性
const keyword = ref("")
// 定义当前角色的属性
const currentRole = ref({})
// 定义tree的实例
const treeRef = ref([])

// 定义tree菜单数据
const menuTreeData = ref([])

// 定义tree菜单数据字段映射
const defaultProps = {
    children: 'children',
    label: 'title',
}

// 加载tree菜单的方法
const handleLoadTree = async () => {
    const resp = await FindData()
    console.log("====>111",resp)
    menuTreeData.value = resp.data
}


// 提交
const handleSubmitMenusToRole = async () => {
    // 获取所有选中的节点数组
    const selectNodeList = treeRef.value.getCheckedKeys()
    // 判断是否有选中的节点
    if (selectNodeList && selectNodeList.length == 0 ){
        // 证明没有一个节点选中
        kvaMessage.error("请选中一项操作！")
        return
    }
    // 获取选中的菜单ids
    const menuIds = selectNodeList.join(",")
    // 获取选中的角色id
    const roleId = currentRole.value.id
    // 调用保存的方法
    await SaveRoleMenu({roleId,menuIds})
    kvaMessage.success("授权成功！")
    // 关闭弹出
    handleClose()
}

// 过滤搜索条件
const filterNode = (value, data) => {
    if (!value) return true
    return data.title.includes(value)
}

// 监听搜索条件
watch(keyword, (val) => {
    treeRef.value?.filter(val)
})


// 打开弹出
const handleOpen = async (role) => {
    title.value = `当前操作的角色是：【${role.roleName}】`
    // 获取当前角色
    currentRole.value = role
    // 打开抽屉弹出
    roleDrawer.value = true
    // 加载树形菜单
    await handleLoadTree()
    // 查询当前角色对应的菜单
    const resp = await FindRoleMenu(role.id)
    // 判断当前角色是否有选中的菜单
    if (resp.data && resp.data?.length >0 ){
        // 大于0 证明有选中的菜单，获取所有选中节点的id
        const menuIds = resp.data.map(c=>c.id)
        // 设置目前选中的节点
        treeRef.value.setCheckedKeys(menuIds)
    }else{
        treeRef.value.setCheckedKeys([])
    }
}

// 关闭弹出
const handleClose = () => {
    // 关闭弹出的属性设置
    roleDrawer.value = false
    // 清空tree菜单
    menuTreeData.value = []
    // 清空tree菜单选中的节点
    treeRef.value.setCheckedKeys([])
}

// 暴露给外部组件使用
defineExpose({
    handleOpen
})

</script>

<style scoped lang="scss">

</style>
